<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名：<input [class.hasError]="formModel.get('username').invalid" type="text" formControlName="username"></div>
  <!--formModel.hasError('required','username')当username字段校验不通过，返回结果为{required:true}，required表示返回值的string-->
  <!--表示用户通过验证或者没有触碰时不显示该信息,关注有木有获取过焦点-->
  <!--untouched 未触碰 true 触碰 false touched 触碰 true 未触碰 false -->
  <div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
    <!--required 校验器名称 username 节点名称-->
    <div [hidden]="!formModel.hasError('required','username')">
      用户名为必填项
    </div>
    <div [hidden]="!formModel.hasError('maxlength','username')">
      用户名不能超过10个字符串
    </div>
    <div [hidden]="!formModel.hasError('pattern','username')">
      用户名不符合语法规则
    </div>
  </div>
  <div>手 机：<input type="text" formControlName="phone"></div>
  <!--pristine 改变false 未改变true dirty与之相反 关注值有木有改变过-->
  <div [hidden]="formModel.get('phone').valid || formModel.get('phone').pristine">
    <div [hidden]="!formModel.hasError('phone','phone')">
      手机格式不符合
    </div>
  </div>
  <div [hidden]="!formModel.get('phone').pending">
      正在校验手机合法性
  </div>
  <div formGroupName="passwords">
    <div>密 码：<input type="password" formControlName="password"></div>
    <!--特殊情况-->
    <div [hidden]="!formModel.hasError('minlength',['passwords','password'])">
      密码最少六位
    </div>
    <div>确认密码：<input type="password" formControlName="pconfrim"></div>
    <div [hidden]="!formModel.hasError('equal','passwords')">
      {{formModel.getError('equal','passwords')?.msg}}
    </div>
  </div>
  <button type="submit">注册</button>
</form>
<div>
  异步验证{{formModel.status}}
</div>
